<!DOCTYPE html>
<html>

<head>
    <title> Conditional Rendering</title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">
    function UserGreeting(props) {
        return <h1>Welcome back</h1>
    }
    function GuestGreeting(props) {
        return <h1>Please login in</h1>
    }

    function Greeting(props) {
        // render a different greeting depends on the value of isLoginedIn in props.
        const isLoginedIn = props.isLoginedIn;
        if (isLoginedIn) {
            return <UserGreeting />
        }
        return <GuestGreeting />
    }

    function LoginButton(props) {
        return (
            <button onClick={props.onClick}>Login</button>
        );
    }
    function LogoutButton(props) {
        return (
            <button onClick={props.onClick}>Logout</button>
        )
    }
    class LoginControl extends React.Component {
        constructor(props) {
            super(props);
            this.state = { isLoginedIn: false, };
            this._handleLoginClick = this.handleLoginClick.bind(this);
            this._handleLoginoutClick = this.handleLoginoutClick.bind(this);
        }

        handleLoginClick() {
            this.setState({
                isLoginedIn: true,
            })
        }

        handleLoginoutClick() {
            this.setState({
                isLoginedIn: false,
            })
        }

        // TODO： 组件套组件？是要写在组件内部，与它平级
        render() {
            const isLoginedIn = this.state.isLoginedIn;
            let button;
            if (isLoginedIn) {
                button = <LogoutButton onClick={this._handleLoginoutClick} />
            }
            else {
                button = <LoginButton onClick={this._handleLoginClick} />
            }
            // Way 2 : Element Variables: {button}
            return (
                <div>
                    <Greeting isLoginedIn={isLoginedIn} />
                    {button}
                </div>
            );
        }
    }
    ReactDOM.render(<LoginControl />, document.getElementById('root'));
</script>